import { useEffect, useRef, useState } from 'react'; // 添加 useState
import LoginPopup from '../../components/LoginPopup/LoginPopup'; // 引入登录弹框组件
import './style.scss';
import { Button, Modal } from 'antd';
import SwiperImg from '../../com/SwiperImg/SwiperImg';
import { SwiperImg2 } from '../../com/SwiperImg/SwiperImg';
import { SwiperImg3 } from '../../com/SwiperImg/SwiperImg';
import { SwiperImg4 } from '../../com/SwiperImg/SwiperImg';
import { SwiperImg5 } from '../../com/SwiperImg/SwiperImg';
import { SwiperImg6 } from '../../com/SwiperImg/SwiperImg';
import { SwiperImg7 } from '../../com/SwiperImg/SwiperImg';
import { SelectedTemplatesImg } from '../../com/SwiperImg/SwiperImg'
import Calendar from '../../com/Calendar/Calendar'
// 引入所需图标
import { ToolOutlined, FileTextOutlined, AppstoreOutlined, FolderOutlined, ContactsOutlined, DeleteOutlined, EditOutlined, RightOutlined, CaretDownOutlined } from '@ant-design/icons';
import cal from '../../../public/loginImg/cal.jpg'
import bell from '../../../public/loginImg/bell.jpg'
import person from '../../../public/loginImg/man.jpg'
import { format } from 'date-fns'; // 安装日期格式化库：npm install date-fns
import zhCN from 'date-fns/locale/zh-CN'; // 中文语言包
import * as echarts from 'echarts';
// 导入农历库
import lunisolar from 'lunisolar';
import { FaFile, FaImage, FaFolderOpen, FaSearch, FaExchangeAlt } from 'react-icons/fa';
import { FaMobileAlt, FaDesktop, FaHashtag, FaFileAlt } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';






const Workbenches=() =>{
    const chartRef = useRef<HTMLDivElement>(null);
    const [chartInstance, setChartInstance] = useState<echarts.ECharts | null>(null);
    // 在组件顶部添加状态变量
    const [activeSubTab, setActiveSubTab] = useState<'initiated' | 'participated'>();
    const [activeTab, setActiveTab] = useState<'works' | 'distribution'>('works');
    const [activeWorkType, setActiveWorkType] = useState<string>('all');
    const [loginVisible, setLoginVisible] = useState(false); // 弹框显示状态
    const [isDropdownVisible, setIsDropdownVisible] = useState(false); // 新增下拉状态
    const [showDesignModal, setShowDesignModal] = useState(false);
    const navigate=useNavigate()

  // 创建设计弹框逻辑（单独处理）
  const handleDesignClick = () => {
    setShowDesignModal(true);
  };

  //跳转到创建设计页面
  const topicture=()=>{
    navigate('/Createdesign')
  }

  // 跳转低代码区，制作海报 图片
  const lowcode=()=>{
      navigate('/lowcode')
  }


    // 日历显示状态
    const [showCalendar, setShowCalendar] = useState(false);
    //存储日期
    const [currentDate] = useState(new Date()); 
   // 星期的函数
  const formatWeekday = (date: Date) => {
    return format(date, 'eee', { locale: zhCN });
  };
  

  
    // 精确的农历日期格式
    const formatLunarDate = (date: Date) => {
        const localDate = new Date(
  date.getFullYear(),
  date.getMonth(),
  date.getDate()
);

const lunar = lunisolar(localDate);
return `农历 ${lunar.format('M月D日')}`;
    };
    console.log('124',formatLunarDate)
    // 添加本地用户状态管理
    const [localUserInfo, setLocalUserInfo] = useState(() => {
        const saved = localStorage.getItem('userInfo');
        return saved ? JSON.parse(saved) : null;
    });

    const handleLoginSuccess = () => {
        setLoginVisible(false);
        // 登录成功后更新本地状态
        const saved = localStorage.getItem('userInfo');
        setLocalUserInfo(saved ? JSON.parse(saved) : null);
    };

  //图表
    useEffect(() => {
        if (!chartRef.current) return;
        chartRef.current.style.height = '210px';
        chartRef.current.style.width = '640px';
        const chart = echarts.init(chartRef.current);
        setChartInstance(chart);
        var option = {
            title: {
                text: '数据分析'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新增总表单(份)', '新增被浏览(次)'],
                bottom: '-6px',
                icon: 'circle',
                itemWidth: 8,   // 控制圆点宽度
                itemHeight: 8,  // 控制圆点高度


            },

            grid: {

                left: '4%',
                right: '11%',
                bottom: '16%',

            },

            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29']
            },
            yAxis: {
                type: 'value',
                interval: 0.2,
                splitLine: {
                    lineStyle: {
                        type: 'dashed' // 设置Y轴网格线为虚线
                    }
                }
            },
            series: [
                {
                    name: '新增总表单(份)',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0]
                },
                {
                    name: '新增被浏览(次)',
                    type: 'line',
                    stack: 'Total',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    lineStyle: {
                        color: '#ff9d00' // 橙色
                    },

                }
            ]
        };

        chart.setOption(option);


        const handleResize = () => chart.resize();
        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
            chart.dispose();
        };
    }, [])

    useEffect(() => {
        if (chartInstance && activeTab === 'works') {
            chartInstance.resize();
        }
    }, [activeTab, chartInstance]);

    return (
        <div className="workbench-container">
            <header className="sticky-header">
                {/* 头部内容 */}
                <h2>稿定设计</h2>
                <div className="top-user">
                    {localUserInfo ? (
                        <div className="avator">
                            <img
                                src={localUserInfo.avator}
                                className="user-avatar"
                            />
                        </div>
                    ) : (
                        <Button
                            type='primary'
                            className='btn'
                            onClick={() => setLoginVisible(true)}
                        >
                            登录/注册
                        </Button>
                    )}


                </div>

            </header>

            <div className="content-wrapper">
                <div className='nav-left'>
                    {/* 导航内容 */}
                    <div className='nav-item' style={{ display: 'flex', background: '#eef4ff' }}


                    >
                        <p className='curcle'>创建设计</p>
                        <span style={{ color: '#1261ff', fontWeight: 'bold', fontSize: '16px' }}>首页</span>
                    </div>
                    <div className="nav-item">
                        {/* 添加作品图标 */}
                        <ToolOutlined />
                        <span>作品</span>
                    </div>
                    <div className="nav-item">
                        {/* 添加素材图标 */}
                        <FileTextOutlined />
                        <span>素材</span>
                    </div>
                    <div className="nav-item">
                        {/* 添加模板图标 */}
                        <AppstoreOutlined />
                        <span>模板</span>
                    </div>
                  
                    <div className="nav-item">
                        {/* 添加文件夹图标 */}
                        <FolderOutlined />
                        <span>文件夹</span>
                    </div>
                    <div className="nav-item">
                        {/* 添加智能名片图标 */}
                        <ContactsOutlined />
                        <span>智能名片</span>
                    </div>
                    <div className="nav-item">
                        {/* 添加回收站图标 */}
                        <DeleteOutlined />
                        <span>回收站</span>
                    </div>
                </div>

                <main className="scrollable-content">
                    {/* 主内容区域 */}

                    <div style={{ height: '1500px' }}>
                        {/* 顶部信息 */}
                        <div className="information">
                            <div className="info-left">
                            {
                                 localUserInfo && (
                                    <h4>{localUserInfo.nickname}<EditOutlined style={{ marginLeft: '5px' }} /></h4>
                                 )
                            }   
                                <div className="info-vip">
                                    <Button className='vipBtn'>开通会员</Button>
                                    <div className="vip-detail">
                                        <span>开通会员，全场模板免费用</span>
                                        <span>查看会员特权<RightOutlined /></span>
                                    </div>
                                </div>
                            </div>
                            <div className="info-cal"   
                            onMouseEnter={()=>setShowCalendar(true)}
                            onMouseLeave={()=>setShowCalendar(false)}
                            >
                                <div style={{ position: 'relative' }}>
                                    <div className="top-cal" >
                                        <div className="time">
                                            <h4><span style={{ fontSize: '30px' }}> {String(currentDate.getDate()).padStart(2, '0')}</span> /{currentDate.getMonth() + 1} {currentDate.getFullYear()}</h4>
                                            <p style={{ fontSize: '12px', color: "#ababab" }}>{formatWeekday(currentDate)} {formatLunarDate(currentDate)}</p>
                                        </div>
                                        <div className="bar">

                                        </div>
                                        <div className="festival">
                                            <h4><img style={{ width: '20px', height: '18px' }} src={cal} alt="" />端午节</h4>
                                        </div>
                                    </div>

                                    {/* 日历弹出层 */}
                                    {showCalendar && (
                                        <div
                                            style={{
                                                position: 'absolute',
                                                top: '100%',
                                                left: 0,
                                                zIndex: 1000,
                                                width: '800px',
                                                backgroundColor: 'white',
                                                boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
                                                borderRadius: '8px',
                                                overflow: 'hidden',
                                                marginTop: '5px'
                                            }}
                                        >
                                            <Calendar />
                                        </div>
                                    )}
                                </div>

                                <div className="cal-detail">
                                    <p>
                                        <img style={{ width: '20px', height: '18px' }} src={bell} alt="" />
                                        【智慧预约｜秒速收款】“满约”全新上线，完全免费，抢鲜体验<RightOutlined style={{ fontSize: '12px' }} /><RightOutlined style={{ fontSize: '12px' }} />
                                    </p>
                                    <p>
                                        <img style={{ width: '20px', height: '18px' }} src={bell} alt="" />
                                        【欢乐童年】亲子活动、才艺展示网络评比，点击制作<RightOutlined style={{ fontSize: '12px' }} /><RightOutlined style={{ fontSize: '12px' }} />
                                    </p>
                                </div>
                            </div>
                        </div>
                        {/* 数据信息 */}
                        <div className="data-info">
                            <div className="data-top">
                                <div className="top-left">
                                    <h2>我的数据</h2>
                                    <div className={`data ${activeTab === 'works' ? 'active' : ''}`}
                                        onClick={() => setActiveTab('works')}>作品数据</div>
                                    <div className={`data ${activeTab === 'distribution' ? 'active' : ''}`}
                                        onClick={() => setActiveTab('distribution')}>分发数据</div>
                                </div>
                                <div className="top-right">
                                    <span className='arrow'>查看更多<RightOutlined style={{ fontSize: '12px' }} /></span>
                                </div>
                            </div>

                            <div className="data-content">
                                {activeTab === 'works' ? (
                                    // 作品数据内容
                                    <div className='works-content'>
                                        <div className="weekly-report">
                                            <div className="weekly-top">
                                                <div className="weekly-time">
                                                    <h2>活跃周报 <span style={{ fontSize: '12px', color: "#9f9fa0" }}>5.19-5.25</span></h2>
                                                </div>
                                                <div className="weekly-design">
                                                    <Button className='weekly-btn' type='primary' onClick={handleDesignClick}>去制作</Button>
                                                </div>

                                            </div>
                                            <div className="weekly-content">
                                                <div className="weekly-item">
                                                    <div className='curcle-item'>0</div>
                                                    <p>下载作品</p>
                                                    <p>周对比 0</p>
                                                </div>
                                                <div className="weekly-item">
                                                    <div className='curcle-item'>0</div>
                                                    <p>下载作品</p>
                                                    <p>周对比 0</p>
                                                </div>
                                                <div className="weekly-item">
                                                    <div className='curcle-item'>0</div>
                                                    <p>下载作品</p>
                                                    <p>周对比 0</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="data-analysis">
                                            <div className="data-chart" ref={chartRef} style={{ display: activeTab === 'works' ? 'block' : 'none' }}>

                                            </div>
                                        </div>
                                    </div>
                                ) : (
                                    // 分发数据内容
                                    <div className='distribution-content'>
                                        <span
                                            className={`sub-tabs ${activeSubTab === 'initiated' ? 'active' : ''}`}
                                            onClick={() => setActiveSubTab('initiated')} // 添加点击事件
                                        >我发起的</span>
                                        <span
                                            className={`sub-tabs ${activeSubTab === 'participated' ? 'active' : ''}`}
                                            onClick={() => setActiveSubTab('participated')} // 添加点击事件
                                        >我参与的</span>
                                        <div className="sub-content">
                                            {activeSubTab === 'initiated' ? (
                                                <div style={{ textAlign: 'center', marginTop: '150px' }}>




                                                    <p style={{ color: "#bcbcbc", margin: '5px' }}>当前暂无团队，快去创建吧</p>
                                                    <Button type='primary'>创建团队</Button>


                                                </div>
                                            ) : (
                                                <div style={{ textAlign: 'center', marginTop: '150px' }}>

                                                    <p style={{ color: "#bcbcbc", margin: '5px' }}>还没有参与作品分发</p>


                                                </div>
                                            )}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>


                        {/* 作品 */}
                        <div className="sub-works">
                            <div className="title">
                                <h2>作品</h2>
                                <p style={{ fontSize: '14px' }} className='arrow'>查看更多<RightOutlined /></p>
                            </div>
                            {/* tab切换 */}

                            <div className="sub-tab">
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'all' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('all')}
                                >
                                    全部
                                </span>
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'h5' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('h5')}
                                >
                                    H5
                                </span>
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'poster' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('poster')}
                                >
                                    海报
                                </span>
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'long' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('long')}
                                >
                                    长页
                                </span>
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'form' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('form')}
                                >
                                    表单
                                </span>
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'interactive' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('interactive')}
                                >
                                    互动
                                </span>
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'ebook' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('ebook')}
                                >
                                    电子画册
                                </span>
                                <span
                                    className={`sub-tab-item ${activeWorkType === 'video' ? 'active' : ''}`}
                                    onClick={() => setActiveWorkType('video')}
                                >
                                    视频
                                </span>
                            </div>
                            <div className="sub-works-content">
                                {activeWorkType === 'all' && <div >
                                    <SwiperImg />
                                </div>}
                                {activeWorkType === 'h5' && <div>
                                    <SwiperImg2 />
                                </div>}
                                {activeWorkType === 'poster' && <div>
                                    <SwiperImg3 /></div>}
                                {activeWorkType === 'long' && <div>
                                    <SwiperImg4 /></div>}
                                {activeWorkType === 'form' && <div>
                                    <SwiperImg5 /></div>}
                                {activeWorkType === 'interactive' && <div>
                                    <SwiperImg6 /></div>}
                                {activeWorkType === 'ebook' && <div className='ele-pictrue'>

                                    <dl>
                                        <dt>
                                            <img src={person} alt="" style={{ widows: '180px', height: '120px' }} />
                                        </dt>
                                        <dd>
                                            <p style={{ fontSize: '14px', color: "#9c9c9c", margin: '10px' }}>你的作品列表为空，快去创建吧</p>
                                            <Button color="primary" variant="outlined">查看新生教程</Button>
                                            <Button type='primary' style={{ margin: '0px 10px' }}>创建作品</Button>
                                        </dd>
                                    </dl>
                                </div>}
                                {activeWorkType === 'video' && <div>
                                    <SwiperImg7 /></div>}
                            </div>
                        </div>

                        {/* 待办事项 */}
                        <div className="schedule">
                            <div className="title">
                                <h2>待办事项 <span
                                    onClick={() => setIsDropdownVisible(!isDropdownVisible)}
                                    style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', fontSize: '12px', color: "#999999", fontWeight: 'none' }}
                                >全部类型 <CaretDownOutlined className={`dropdown-icon ${isDropdownVisible ? 'rotate-up' : 'rotate-down'}`}
                                    style={{ marginLeft: 5, transition: 'transform 0.3s' }} /> </span></h2>
                                <p style={{ fontSize: '14px' }} className='arrow'>查看更多<RightOutlined /></p>
                            </div>
                            {/* 下拉内容 */}
                            {isDropdownVisible && (
                                <div className="dropdown-content">
                                    <div className="dropdown-item">协作共享通知</div>
                                    <div className="dropdown-item">全员分发</div>
                                    <div className="dropdown-item">协作共享申请</div>
                                    <div className="dropdown-item">协作权限申请</div>
                                </div>
                            )}
                            <div className="schedule-content">
                                <dl>
                                    <dt>
                                        <img src={person} alt="" style={{ widows: '180px', height: '120px' }} />
                                    </dt>
                                    <dd>
                                        <p style={{ fontSize: '14px', color: "#9c9c9c", margin: '10px' }}>您尚未加入任何团队，可去创建团队开始协作</p>

                                        <Button type='primary' style={{ marginLeft: '28%', width: '150px' }}>创建团队</Button>
                                    </dd>
                                </dl>
                            </div>
                        </div>

                        {/* 精选模版 */}
                        <div className="selected-templates">
                            <div className="title">
                                <h2>精选模版</h2>
                                <p style={{ fontSize: '14px' }} className='arrow'>查看更多<RightOutlined /></p>
                            </div>

                            <div className="selected-content">
                                <SelectedTemplatesImg />
                            </div>
                        </div>
                    </div>
                </main>
            </div>

              

            {/* 登录弹框 */}
            {loginVisible && (
                <Modal
                    open={loginVisible}
                    footer={null}
                    onCancel={() => setLoginVisible(false)}
                    width={800}
                >
                    <LoginPopup onLoginSuccess={handleLoginSuccess} />
                </Modal>
            )}




    {/* 创建设计弹框（仅在 showDesignModal 为 true 时显示） */}
          <Modal
            open={showDesignModal}
            onCancel={()=>setShowDesignModal(false)}
            footer={null}
            centered
            className="design-modal" // 自定义样式类名
          >
            <div className="app">
              {/* 左侧边栏 (保持不变) */}
              <div className="sidebar">
                <h1 className="title">创建设计</h1>
                <div className="button" >
                  <FaFile />
                  <span>新建画布</span>
                </div>
                <div className="button" onClick={topicture}>
                  <FaImage />
                  <span>导入图片</span>
                </div>
                <div className="button">
                  <FaFolderOpen />
                  <span>打开本地</span>
                  <span className="psd">PSD</span>
                </div>
              </div>

              {/* 右侧内容区 (保持不变) */}
              <div className="mainContent">
                {/* 搜索栏 (保持不变) */}
                <div className="searchBar">
                  <FaSearch />
                  <input type="text" placeholder="搜索全部尺寸" />
                </div>

                {/* 自定义尺寸区域 (保持不变) */}
                <div className="customSize">
                  <h3>自定义尺寸</h3>
                  <div className="sizeInput">
                    <input type="number" placeholder="宽" />
                    <input type="number" placeholder="高" />
                    <button className="exchange">
                      <FaExchangeAlt />
                    </button>
                    <span>px</span>
                    <button className="create">创建</button>
                  </div>
                </div>

                {/* 我的区域 (保持不变) */}
                <div className="mySection">
                  <h3>我的</h3>
                  <div className="empty">暂无内容</div>
                </div>

                {/* 推荐区域 (保持不变) */}
                <div className="recommend">
                  <h3>推荐</h3>
                  <div className="cardGrid">
                    {/* 手机海报卡片 (保持不变) */}
                    <div className="card" onClick={lowcode}>
                      <div className="icon"><FaMobileAlt /></div>
                      <div className="info">
                        <h4>手机海报</h4>
                        <p>1242 × 2208 px</p>
                      </div>
                    </div>

                    {/* 横版海报卡片 (保持不变) */}
                    <div className="card">
                      <div className="icon"><FaDesktop /></div>
                      <div className="info">
                        <h4>横版海报</h4>
                        <p>1800 × 1000 px</p>
                      </div>
                    </div>

                    {/* 小红书配图卡片 (保持不变) */}
                    <div className="card">
                      <div className="icon"><FaHashtag /></div>
                      <div className="info">
                        <h4>小红书配图</h4>
                        <p>1242 × 1656 px</p>
                      </div>
                    </div>

                    {/* 公众号首图卡片 (修改图标导入) */}
                    <div className="card">
                      <div className="icon"><FaHashtag /></div>
                      <div className="info">
                        <h4>公众号首图</h4>
                        <p>1800 × 766 px</p>
                      </div>
                    </div>

                    {/* 公众号次图卡片 (修改图标导入) */}
                    <div className="card">
                      <div className="icon"><FaHashtag /></div>
                      <div className="info">
                        <h4>公众号次图</h4>
                        <p>1000 × 1000 px</p>
                      </div>
                    </div>

                    {/* 文章长图卡片 (保持不变) */}
                    <div className="card">
                      <div className="icon"><FaFileAlt /></div>
                      <div className="info">
                        <h4>文章长图</h4>
                        <p>1000 × 1500 px</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Modal>






        </div>
    );
}

export default Workbenches;